<template>
  <div class="bankContainer">
    <!-- 面包屑 -->
    <el-breadcrumb
      v-show="$route.name !== 'company'"
      separator-class="el-icon-arrow-right"
      style="padding-left: 0px"
    >
      <el-breadcrumb-item :to="{ name: 'company' }">{{
        $t("nameTitle.company")
      }}</el-breadcrumb-item>
      <el-breadcrumb-item> {{ $route.meta.aliasName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--搜索条件区域-->
    <div v-show="$route.name === 'company'" class="companySearch">
      <el-row :gutter="20">
        <!--<el-col :span="2">-->
        <!--<div class="grid-content bg-purple searchInputStyle">查询条件：</div>-->
        <!--</el-col>-->
        <el-col :span="19">
          <div class="grid-content bg-purple-light">
            <avue-form
              ref="formCompany"
              v-model="objForm"
              :option="optionFormData"
              @submit="searchSubmitForm"
            />
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="verificationFn"
              >电话验密</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <!--身份验证标识-->
    <div class="verificationTips">
      <span
        :class="{
          'el-icon-circle-close': this.idPass,
          'color-red': this.idPass,
          'el-icon-circle-check': !this.idPass,
          'color-green': !this.idPass,
        }"
        >{{ this.idCheckTxt }}</span
      >
    </div>
    <!--客户信息-->
    <InformationCompany
      v-show="isShowFlag"
      :data="companyInfoData"
      :option="companyOption"
    />
    <InformationCompany
      v-show="!isShowFlag"
      :data="companyInfoData2"
      :option="companyOption2"
    />
    <!--列表信息-->
    <ChildDropDown
      v-show="$route.name === 'company'"
      :data="accountData"
      :option="accountOption"
      @checkedListBn="checkedListBn"
    />
    <!-- 列表信息展示 只显示选中的 -->
    <ChildDropDown
      v-show="$route.name !== 'company'"
      :data="companyListInfoData"
      :option="accountOption"
    />
    <!--子模块区域-->
    <div v-show="$route.name === 'company'" class="sonArea mt10">
      <div
        v-for="(item, index) in listData"
        v-if="item.show"
        :key="index"
        class="inlineStyle"
      >
        <router-link :to="{ name: item.routerName }">
          <div :class="[item.imgClass, 'commonIcon']" />
          <span>{{ item.name }}</span>
        </router-link>
      </div>
    </div>

    <!-- 子模块路由展示 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import Axios from "axios";
import searchInput from "@/components/common/CommonDate";
import InformationCompany from "@/components/common/InformationCompany";
import ChildDropDown from "@/components/common/DropDownLoad";
import { queryLoss, saveTransCusInfo } from "@/api/bankBiz/loss/loss";

export default {
  name: "CompanyBox",
  components: {
    InformationCompany,
    ChildDropDown,
    searchInput,
  },
  data() {
    const _that = this;
    const validateBank = function (rule, value, callback) {
      const bankReg = /^\d{1,}$/;
      if (value) {
        if (bankReg.test(value)) {
          // 账号
          if (value.indexOf("070667") != -1) {
            if (value.charAt(11) != "2") {
              callback(new Error("请输入对公账号！"));
            } else if (value.length != 22) {
              callback(new Error("请输入22位的对公账号！"));
            } else {
              if (_that.clickEventFlag) {
                _that.clickEventFlag = false;
                _that.searchCompanyName();
              }
              _that.$refs["formCompany"].clearValidate();
            }
          }
          // 电子银行账号
          else if (value.length >= 6 && value.length <= 10) {
            if (_that.clickEventFlag) {
              _that.clickEventFlag = false;
              _that.searchCompanyName();
            }
            _that.$refs["formCompany"].clearValidate();
          }
          // 不满足条件提示语
          else {
            callback(new Error("请输入正确的账号/电子银行账号！"));
          }
          callback();
        } else {
          callback(new Error("账号/电子银行账号必须为纯数字！"));
        }
      } else {
        callback(new Error("请输入账号/电子银行账号！"));
      }
    };
    return {
      clickEventFlag: false,
      listData: [],
      // 判断是否正则成功之后验密
      checkIvrRegExpFlag: false,
      // 已经选中的数据
      companyListInfoData: [],
      companyBankNo: "",
      checkFlag: false,
      objForm: {},
      isScroll: false,
      checkedList: [],
      idCheckTxt: "身份验证未通过",
      idPass: true,
      optionFormData: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "150",
        menuPosition: "left",
        column: [
          {
            label: "账号/电子银行账号",
            prop: "cardAcc",
            type: "search",
            appendClick: () => {
              this.clickEventFlag = true;
              this.$refs["formCompany"].validateField("cardAcc");
            },
            mock: {
              type: "cardAcc",
            },
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入账号/电子银行账号",
                trigger: "blur",
              },
              {
                validator: validateBank,
                trigger: "blur",
              },
            ],
          },
        ],
      },
      companyInfoData: {
        cusInfo: {},
        resList: [{}, {}],
      },
      companyOption: {
        title: "客户信息",
        cusList: [
          {
            prop: "no",
            label: "客户号",
            value: "123456789",
            span: 8,
          },
          {
            prop: "companyName",
            label: "公司名称",
            value: "ABC有限公司",
            span: 8,
          },
          {
            prop: "industry",
            label: "行业",
            value: "IT",
            span: 8,
          },
          {
            prop: "idType",
            label: "证件类型",
            value: "组织机构代码证",
            span: 8,
          },
          {
            prop: "idNo",
            label: "证件号码",
            value: "31052563987656",
            span: 8,
          },
          {
            prop: "idValidity",
            label: "证件有效期",
            value: "10年",
            span: 8,
          },
          {
            prop: "phone",
            label: "联系方式",
            value: "13178569856",
            span: 8,
          },
          {
            prop: "address",
            label: "单位地址",
            value: "合肥市包河区南宁路1506号",
            span: 8,
          },
          {
            prop: "businessScope",
            label: "经营范围",
            value: "技术咨询、硬件支持",
            span: 8,
          },
          {
            prop: "registeredCapital",
            label: "注册资本/万元",
            value: "1亿",
            span: 8,
          },
          {
            prop: "openDate",
            label: "开户日期",
            value: "2020年1月2日",
            span: 8,
          },
          {
            prop: "handleAccountManager",
            label: "经办客户经理",
            value: "王先生",
            span: 8,
          },
          {
            prop: "accountManagerNo",
            label: "客户经理编号",
            value: "0876",
            span: 8,
          },
          {
            prop: "accountManagerTel",
            label: "客户经理联系方式",
            value: "15656568989",
            span: 8,
          },
          {
            prop: "currentMaintainer",
            label: "当前维护人",
            value: "Amy",
            span: 8,
          },
        ],
        resList: [
          {
            title: "法人代表基本信息",
            childList: [
              {
                prop: "name",
                label: "姓名",
                value: "李志",
                span: 8,
              },
              {
                prop: "sex",
                label: "性别",
                value: "男",
                span: 8,
              },
              {
                prop: "country",
                label: "国籍",
                value: "中国",
                span: 8,
              },
              {
                prop: "idType",
                label: "证件类型",
                value: "身份证",
                span: 8,
              },
              {
                prop: "idNo",
                label: "证件号码",
                value: "31052563987656",
                span: 8,
              },
              {
                prop: "idValidity",
                label: "证件有效期",
                value: "10年",
                span: 8,
              },
              {
                prop: "phone",
                label: "预留手机号",
                value: "13178569856",
                span: 8,
              },
              {
                prop: "job",
                label: "行业",
                value: "音乐",
                span: 8,
              },
              {
                prop: "occupation",
                label: "职业",
                value: "歌手",
                span: 8,
              },
              {
                prop: "address",
                label: "常住地址",
                value: "南京市雨花台区",
                span: 8,
              },
            ],
          },
          {
            title: "经办人基本信息",
            childList: [
              {
                prop: "name",
                label: "姓名",
                value: "李多多",
                span: 8,
              },
              {
                prop: "sex",
                label: "性别",
                value: "女",
                span: 8,
              },
              {
                prop: "country",
                label: "国籍",
                value: "中国",
                span: 8,
              },
              {
                prop: "idType",
                label: "证件类型",
                value: "身份证",
                span: 8,
              },
              {
                prop: "idNo",
                label: "证件号码",
                value: "31052563982345",
                span: 8,
              },
              {
                prop: "idValidity",
                label: "证件有效期",
                value: "10年",
                span: 8,
              },
              {
                prop: "phone",
                label: "预留手机号",
                value: "13178569857",
                span: 8,
              },
              {
                prop: "job",
                label: "行业",
                value: "音乐",
                span: 8,
              },
              {
                prop: "occupation",
                label: "职业",
                value: "歌手",
                span: 8,
              },
              {
                prop: "address",
                label: "常住地址",
                value: "南京市雨花台区",
                span: 8,
              },
            ],
          },
        ],
      },
      companyOption2: {},
      companyInfoData2: {
        cusInfo: {},
        resList: [{}, {}],
      },
      isShowFlag: false,
      accountData: [],
      accountOption: {
        title: "账户信息",
        accountList: {
          simpleList: [
            {
              prop: "no",
              label: "账号/电子银行账号",
              span: 8,
            },
            {
              prop: "status",
              label: "状态",
              span: 8,
            },
          ],
          resList: [
            {
              prop: "category",
              label: "账户类别",
              span: 8,
            },
            {
              prop: "largeNum",
              label: "大额行号",
              span: 8,
            },
            {
              prop: "openDate",
              label: "开户日期",
              span: 8,
            },
            {
              prop: "openBank",
              label: "开户行",
              span: 8,
            },
          ],
        },
      },
    };
  },
  created() {
    this._setParamsComModule();
    if (this.$store.getters.GET_COMPANYFLAG) {
      this.initCustomerInfo();
    }
  },
  mounted() {
    const self = this;
    // 验密结果
    window.eventEmitter.$on("EventVerifyResult", (data) => {
      if (data.i_verifyflag == "01" && data.p_verifytype == "01") {
        self.$store.commit("SET_COMPANYFLAG", true);
        self.idCheckTxt = "身份验证通过";
        self.idPass = false;
        self.isShowFlag = true;
        self.allFn("bankNo");
      }
    });
    // 振铃进线初始化
    window.eventEmitter.$on("EventCallRecordChange", (data) => {
      self.companyInfoData = {
        cusInfo: {},
        resList: [{}, {}],
      };
      self.companyInfoData2 = {
        cusInfo: {},
        resList: [{}, {}],
      };
      self.accountData = [];
      self.companyListInfoData = [];
      self.companyBankNo = "";
      self.$store.commit("SET_COMPANYFLAG", false);
      self.$store.commit("SET_OFFLINESTATUS", false);
      self.$store.commit("SET_COMPANYCHECKFLAG", false);
      self.$store.commit("SET_GLOBALCARDNO", "");
      self.idCheckTxt = "身份验证未通过";
      self.idPass = true;
      self.checkFlag = false;
      self.isShowFlag = false;
      self.checkIvrRegExpFlag = false;
      self.initCustomerInfo();
    });

    // 挂机初始化
    window.eventEmitter.$on("EventInfoReset", (data) => {
      self.companyInfoData = {
        cusInfo: {},
        resList: [{}, {}],
      };
      self.companyInfoData2 = {
        cusInfo: {},
        resList: [{}, {}],
      };
      self.objForm.cardAcc = "";
      self.accountData = [];
      self.companyListInfoData = [];
      self.companyBankNo = "";
      self.idCheckTxt = "身份验证未通过";
      self.idPass = true;
      self.checkIvrRegExpFlag = false;
      self.checkFlag = false;
      self.$store.commit("SET_COMPANYCHECKFLAG", false);
      self.$store.commit("SET_GLOBALCARDNO", "");
      self.isShowFlag = false;
    });
  },
  methods: {
    // 模块参数化配置
    _setParamsComModule() {
      this.companyOption = window.companyOptions.moduleOption.companyOption;
      this.accountOption = window.companyOptions.moduleOption.accountOption;
      this.companyOption2 = window.companyOptions.moduleOption.companyOption2;
      this.listData = window.companyOptions.routerQuery;
      console.log(
        "company router query array is: " + JSON.stringify(this.listData)
      );
    },
    // 界面初始化获取客户信息
    initCustomerInfo() {
      const data = Constants.Model;
      if (data && data.userData) {
        if (
          data.userData.i_verifyflag == "01" &&
          data.userData.p_verifytype == "01"
        ) {
          this.objForm.cardAcc = data.userData.p_cert_num;
          this.$store.commit("SET_COMPANYFLAG", true);
          this.idCheckTxt = "身份验证通过";
          this.idPass = false;
          this.isShowFlag = true;
          this.allFn("bankNo");
        }
      }
    },
    // 查询公司名称
    searchCompanyName() {
      if (this.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify("提示", "离线状态不能查询！", "error");
        return;
      }
      // 查询公司信息清空验密标识
      this.companyInfoData2 = {
        cusInfo: {},
        resList: [{}, {}],
      };
      this.accountData = [];
      this.$store.commit("SET_COMPANYFLAG", false);
      this.$store.commit("SET_COMPANYCHECKFLAG", false);
      this.idCheckTxt = "身份验证未通过";
      this.idPass = true;
      this.checkFlag = false;
      this.isShowFlag = false;
      this.checkIvrRegExpFlag = false;
      // 客户信息接口
      const customerParams = {
        namespace: "Company",
        key: "companyInformationShow",
        query: {
          accountNo: this.objForm.cardAcc,
        },
      };
      queryLoss(customerParams)
        .then((res) => {
          console.log(
            "company companyInfoData is: " + JSON.stringify(res.data.data)
          );
          if (res.data.code == 200) {
            if (
              res.data.data &&
              res.data.data.cusInfo &&
              res.data.data.cusInfo.companyName
            ) {
              this.checkIvrRegExpFlag = true;
              this.companyInfoData2 = res.data.data;
            } else {
              window.globalUiKit.notify("提示", "无公司相关信息！", "error");
            }
          } else {
            window.globalUiKit.notify("提示", res.data.message, "error");
          }
          this.companyInfoData = {
            cusInfo: {},
            resList: [{}, {}],
          };
          saveTransCusInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 客户信息查询
    _queryCustInfo(typeNo) {
      // 客户信息接口
      const customerParams = {
        namespace: "Company",
        key: "companyInformationShow",
        query: {
          accountNo: "6231100088888421",
          idType: "",
          idNo: "",
        },
      };
      // 卡号
      if (typeNo == "bankNo") {
        customerParams.query.accountNo = this.objForm.cardAcc;
        customerParams.query.idType = "";
        customerParams.query.idNo = "";
      }
      // 证件号
      else {
        customerParams.query.accountNo = "";
        customerParams.query.idType = this.objForm.type;
        customerParams.query.idNo = this.objForm.idNum;
      }
      queryLoss(customerParams)
        .then((res) => {
          console.log(
            "company companyInfoData is: " + JSON.stringify(res.data.data)
          );
          // 判断是否为同一客户
          if (
            res.data.data &&
            res.data.data.cusInfo &&
            res.data.data.cusInfo.no &&
            this.companyInfoData.cusInfo.no
          ) {
            if (res.data.data.cusInfo.no == this.companyInfoData.cusInfo.no) {
              return;
            }
          }
          // 无此客户
          if (!res.data.data) {
            this.companyInfoData = {
              cusInfo: {},
              resList: [{}, {}],
            };
            window.globalUiKit.notify("提示", "查询无客户信息！", "info");
            return;
          }
          // 清除验证标识
          // this.$store.commit('SET_COMPANYFLAG', false)
          // this.idCheckTxt = '身份验证未通过'
          // this.idPass = true
          this.companyInfoData = res.data.data;
          saveTransCusInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 搜索框查询
    searchSubmitForm(i) {
      this.$message.success("当前数据" + JSON.stringify(i));
      this._queryCustInfo(i.type, i.idNum, i.cardAcc);
      this._searchList(i.type, i.idNum, i.cardAcc);
    },
    // 账户列表查询
    _searchList(typeNo) {
      const accountParams = {
        namespace: "Company",
        key: "accountInfoData",
        query: {
          accountNo: "6231100088888421",
          idType: "",
          idNo: "",
        },
      };
      // 卡号
      if (typeNo == "bankNo") {
        accountParams.query.accountNo = this.objForm.cardAcc;
        accountParams.query.idType = "";
        accountParams.query.idNo = "";
      }
      // 证件号
      else {
        accountParams.query.accountNo = "";
        accountParams.query.idType = this.objForm.type;
        accountParams.query.idNo = this.objForm.idNum;
      }
      queryLoss(accountParams)
        .then((res) => {
          console.log(
            "response company accountData is: " + JSON.stringify(res.data.data)
          );
          // 清除选中卡号
          this.checkFlag = false;
          this.$store.commit("SET_COMPANYCHECKFLAG", false);
          // 清除验证标识
          // this.$store.commit('SET_COMPANYFLAG', false)
          // this.idCheckTxt = '身份验证未通过'
          // this.idPass = true
          this.accountData = res.data.data;
          if (!this.accountData) {
            window.globalUiKit.notify("提示", "查询无账户信息！", "info");
            return;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    checkedListBn(data) {
      console.log("receive data is: " + data[0]);
      // 标记是否有选中的账号
      this.checkFlag = data[1];
      this.$store.commit("SET_COMPANYCHECKFLAG", data[1]);
      // 判断是否选中
      if (data[1]) {
        const index = data[0];
        this.companyListInfoData = [];
        this.companyListInfoData.push(this.accountData[index]);
        sessionStorage.setItem("accName", "");
        sessionStorage.setItem("bankNo", this.companyListInfoData[0].no);
        sessionStorage.setItem(
          "openBankName",
          this.companyListInfoData[0].openBank
        );
        this.companyBankNo = this.companyListInfoData[0].no;
        this.$store.commit("SET_GLOBALCARDNO", this.companyListInfoData[0].no);
        if (!this.companyBankNo) {
          window.globalUiKit.notify(
            "提示",
            "选中的账户信息没有账号！",
            "error"
          );
        }
      } else {
        this.companyBankNo = "";
      }
    },
    // 电话验密
    verificationFn() {
      const self = this;
      if (self.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify("提示", "离线状态不能验密！", "error");
        return;
      }
      if (!self.checkIvrRegExpFlag) {
        window.globalUiKit.notify("提示", "请先查询客户信息！", "error");
        return;
      }
      // if (!self.checkFlag) {
      //   window.globalUiKit.notify('提示', '请先选择一个账号/电子银行账号！', 'error')
      //   return
      // }
      self.$refs["formCompany"].validateField("cardAcc");
      window.globalUiKit.confirm(
        "提示",
        "是否要进行电话验密操作?",
        function () {
          // 发起验密时将验密成功标识和客户信息重置
          self.$store.commit("SET_COMPANYFLAG", false);
          self.idCheckTxt = "身份验证未通过";
          self.idPass = true;
          // 验密发送随路事件
          const userdata = {
            // 私有部分，根据不同验证类型组合
            p_verifytype: "01", // 验密类型
            p_cert_type: "01", // 介质类型
            p_cert_num: self.objForm.cardAcc || "", // 介质号码
            p_accno: "", // 对公客户号
            p_oper_id: "", // 对公操作员ID
            p_pass_type: "02", // 密码类型
            p_pass_operate: "01", // 交易密码操作
            p_biz: "00", // 业务操作
            // 公共部分
            r_function: "singletransfer",
            r_flag: "3",
            con_flag: "1",
          };
          globalUserData.verifyPass(userdata);
          if (window.Settings.verifySwitch) {
            self.$store.commit("SET_COMPANYFLAG", true);
            self.idCheckTxt = "身份验证通过";
            self.idPass = false;
            self.isShowFlag = true;
            self.allFn("bankNo");
          }
        }
      );
    },
    // 按钮搜索条件，请求方法集合
    allFn(typeNo) {
      // 离线状态不能操作
      if (this.$store.getters.GET_OFFLINESTATUS) {
        window.globalUiKit.notify("提示", "离线状态不能查询！", "error");
        return;
      }
      this._searchList(typeNo);
      this._queryCustInfo(typeNo);
    },
  },
  // 路由拦截
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log("company bank no is: " + vm.companyBankNo);
      if (vm.companyBankNo) {
        sessionStorage.setItem("bankNo", vm.companyBankNo);
      } else {
        sessionStorage.setItem("bankNo", "");
      }
    });
  },
};
</script>

<style>
.bankContainer .el-form-item__content {
  width: 80% !important;
}

.bankContainer .el-form-item {
  margin-bottom: 6px;
}

.bankContainer ul li {
  float: none !important;
  text-align: left !important;
}

.searchInputStyle {
  color: #606266;
  font-weight: 700;
  line-height: 34px;
}

/*子模块区域*/
.inlineStyle {
  width: 100px;
  display: inline-block;
  text-align: center;
}

.inlineStyle span {
  text-align: center;
  display: block;
}

.sonArea img {
  width: 70px;
  height: 70px;
}

.verificationTips {
  width: 100%;
  height: 1px;
  text-align: right;
  position: relative;
}

.verificationTips span {
  position: absolute;
  right: 10px;
  top: 15px;
  z-index: 99;
}
</style>
